<template>
	<div class="wapper">
		<swiper :options="swiperOption" ref="mySwiper">
		    <swiper-slide v-for="item of swiperList" :key="item.id">
		    	<img class="swiper-img" :src='item.imgUrl'>
		    </swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	export default {
		name:'HomeSwpier',
		props:{
			swiperList:Array
		},
		data(){
			return {
				swiperOption:{
					pagination:'.swiper-pagination',
					loop:true
				},
			}
		},
		computed: {
      		swiper() {
        		return this.$refs.mySwiper.swiper
      		},
    	},
		mounted(){
			this.swiper.slideTo(1, 1000, false)
		}
	}
</script>

<style lang="stylus" scoped>
.wapper >>> .swiper-pagination-bullet-active{
	background:#fff
}
// wapper由于网速比较慢的时候图片加载比较慢。下面的文字会先加载出来，在图片没加载的时候高度是0，下面的内容会有抽动的感觉，为了兼容抽动的情况，给div加一个padding-bottom
.wapper
	overflow:hidden
	width:100%
	height:0
	padding-bottom:31%
	.swiper-img
		width:100%
		
</style>